'use strict';

import React from 'react';
import Radium from 'radium';

@Radium
class CSComponent extends React.Component {
  constructor(props) {
    super(props);
    (this : any).showPhone = this.showPhone.bind(this);
    (this : any).hidePhone = this.hidePhone.bind(this);
    (this : any).showWeixin = this.showWeixin.bind(this);
    (this : any).hideWeixin = this.hideWeixin.bind(this);
    (this : any).stopP = this.stopP.bind(this);

    this.state = {};
  }

  showPhone() {
    this.setState({ isShowPhone : true });
  }

  hidePhone() {
    this.setState({ isShowPhone : false });
  }

  showWeixin() {
    this.setState({ isShowWeixin : true });
  }

  hideWeixin() {
    this.setState({ isShowWeixin : false });
  }

  stopP(e) {
    e.stopPropagation();
  }

  render() {
    return (
      <div style={{ position : 'fixed', bottom : '0px', right : '0px', width : '80px', textAlign : 'center', lineHeight : '80px', color : '#fff', backgroundColor : '#6495ed', fontSize : '24px' }}>
        <div style={{ lineHeight : '45px', backgroundColor : '#8a2be2', fontSize : '14px' }}>客服中心</div>
        <div key="phone" onClick={this.showPhone} style={{ cursor : 'pointer', opacity : '0.6', ':hover' : { opacity : '1' } }} ><i className="fa fa-phone" /></div>
        <a key="qq" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1958851403&site=qq&menu=yes" style={{ color : '#FFF', borderTop : '1px solid #e6e6e6', display : 'block', opacity : '0.6', ':hover' : { opacity : '1' } }} ><i className="fa fa-qq" /></a>
        <div key="weixin" onClick={this.showWeixin} style={{ borderTop : '1px solid #e6e6e6', cursor : 'pointer', opacity : '0.6', ':hover' : { opacity : '1' } }} ><i className="fa fa-weixin" /></div>
        {
          !!this.state.isShowPhone ?
            <div style={{ position : 'fixed', display : 'table', top : '0px', left : '0px', width : '100%', height : '100%', backgroundColor : 'rgba(0,0, 0, 0.8)' }} onClick={this.hidePhone} >
              <div style={{ display : 'table-cell', width : '100%', height : '100%', textAlign : 'center', verticalAlign : 'middle' }} >
                <span style={{ padding : '40px 20px 0px', minWidth : '300px', lineHeight : '40px', display : 'inline-block', maxWidth : '100%', backgroundColor : '#5F9EA0', height : '120px', color : '#fff', border : '1px solid #DEB887' }} onClick={this.stopP}>
                  <i className="fa fa-phone" style={{ marginRight : '10px' }}/>17718408376
                </span>
              </div>
            </div>
            :
            null
        }
        {
          !!this.state.isShowWeixin ?
            <div style={{ position : 'fixed', display : 'table', top : '0px', left : '0px', width : '100%', height : '100%', backgroundColor : 'rgba(0,0, 0, 0.8)' }} onClick={this.hideWeixin} >
              <div style={{ display : 'table-cell', width : '100%', height : '100%', textAlign : 'center', verticalAlign : 'middle' }} >
                <div style={{ display : 'inline-block' }}>
                  <img src="/img/weixin.png" style={{ width : '200px' }} />
                  <div style={{ lineHeight : '45px', fontSize : '16px' }}>微信扫一扫</div>
                </div>
              </div>
            </div>
            :
            null
        }
      </div>
    );
  }
};

module.exports=CSComponent;
